<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <script src="../vue.js"></script>
</head>
<body>
  <div id="root">
    <comp1></comp1>
  </div>
  <script type="module">
    Vue.config.productionTip = false

    const AnchoredHeading = {
      props: ['level'],
      // template: `
      //   <div>
      //     <h1 v-if="level==='1'">内容是{{level}}</h1>
      //     <h2 v-if="level==='2'">内容是{{level}}</h2>
      //     <h3 v-if="level==='3'">内容是{{level}}</h3>
      //     <h4 v-if="level==='4'">内容是{{level}}</h4>  
      //   </div>
      // `
      render(h) {
        // return h(
        //   'h' + this.level,
        //   null,
        //   '内容是：' + 'h' + this.level
        // )
        return (
          <h1>hello</h1>
        )
      }
    }

    const Comp1 = {
      template: `
        <div>
          <a href="http://www.baidu.com">百度</a>
          <anchored-heading level="1" />
        </div>
      `,

      components: {
        AnchoredHeading
      },

      // render(createElement) {
      //   return createElement(
      //     'div',
      //     [
      //       createElement(
      //         'div',
      //         {
      //           attrs: {
      //             abc: 'hello'
      //           }
      //         },
      //         [
      //           createElement(
      //             'a',
      //             {
      //               attrs: {
      //                 href: 'http://www.baidu.com'
      //               }
      //             },
      //             '百度'
      //           )
      //         ]
      //       ),

      //       createElement(
      //         'anchored-heading',
      //         {
      //           props: {
      //             level: 3
      //           }
      //         },
      //         'helloworld'
      //       )
      //     ]
      //   )
      // }
    }

    var vm = new Vue({
      el: '#root',
      components: {
        Comp1
      }
    })
  </script>
</body>
</html>